<template>
	<view>
		<!-- 时段选择 -->
		<timepsreen :popshow.sync="showPicker" @savetime="savetime" :defvalue="sreendefTime"></timepsreen>
		<!-- oinvosreen -->
		<u-popup z-index="200" v-model="pupshow" mode="right" @close="headerClose" :safe-area-inset-bottom="true">

			<view class="sreen_area">

				<view class="sreen_item" v-for="(item1, index1) in cfilterlist">
					<view class="sreen_tit">
						{{ item1.title || '' }}
					</view>
					<template v-if="item1.isTime">
						<!-- 时间 -->
						<view class="Time_Area FlexBetween" :class="{'isError':item1.isError}">
							<view class="Time_Select FlexRow" @click="onShowDatePicker(item1, index1, 0)">
								{{ item1.rangetime[0] || '选择开始时间' }}
							</view>
							<view class="between"></view>
							<view class="Time_Select FlexRow" @click="onShowDatePicker(item1, index1, 1)">
								{{ item1.rangetime[1] || '选择结束时间' }}
							</view>
						</view>
					</template>
					<template v-else-if="item1.isRange">
						<!-- 数值范围 -->
						<view class="Time_Area FlexBetween" :class="{'isError':item1.isError}">
							<view class="Time_Select FlexRow">
								<input type="digit" placeholder="最低价" v-model.trim="item1.minVal">
							</view>
							<view class="between"></view>
							<view class="Time_Select FlexRow">
								<input type="digit" placeholder="最高价" v-model.trim="item1.maxVal">
							</view>
						</view>
					</template>
					<template v-else>
						<!-- 单选 -->
						<view class="filter_list FlexWrap" v-if="item1.children && item1.children.length">
							<view class="filter_item FlexRow" :class="{ 'isActive': item2.isChecked }"
								v-for="(item2, index2) in item1.children" @click="fivalClick(index1, index2)">
								<view class="txt line-1">
									{{ item2.name || '' }}
								</view>
							</view>
						</view>
					</template>
				</view>

			</view>

			<view class="sreen_bottom FlexBetween">
				<view class="operate_btn FlexRow" @click="clearClick">
					重置
				</view>
				<view class="operate_btn FlexRow gradient_bg4" @click="deterClick">
					确认
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import timepsreen from "@/bundle4/components/popup/timepsreen.vue"
	export default {
		props: {
			filterval: {
				type: String,
				default: '',
			},

		},
		components: {
			timepsreen,
		},
		data() {
			return {
				pupshow: false,
				cfilterlist: [],

				is_selectArr: [],
				currentIndex: -1,
				currentPos: -1,

				showPicker: false,
				sreendefTime: '',
			}
		},
		methods: {

			// 父级清空这里
			clearParent() {
				this.is_selectArr = []
			},
			// 初始化
			fn_initial() {
				this.pupshow = true
				if (this.is_selectArr.length) {
					this.cfilterlist = JSON.parse(JSON.stringify(this.is_selectArr))
					return
				}
				let newObj = JSON.parse(this.filterval)
				if (!newObj || newObj.length == 0) return;
				for (let item1 of newObj) {
					if (item1.children && item1.children.length) {
						for (let item2 of item1.children) {
							item2.isChecked = false
						}
					}
				}
				this.cfilterlist = newObj
			},
			// 关闭弹窗
			headerClose() {
				this.pupshow = false
				this.cfilterlist = []
				this.$emit('close')

			},
			// 选择
			fivalClick(index1, index2) {
				let cobj1 = this.cfilterlist[index1].children
				if (cobj1 && cobj1.length) {
					for (let item2 of cobj1) {
						item2.isChecked = false
					}
					cobj1[index2].isChecked = true
				}
			},
			// 重置
			clearClick() {
				for (let item1 of this.cfilterlist) {
					if (item1.children && item1.children.length) {
						for (let item2 of item1.children) {
							item2.isChecked = false
						}
					}
					item1.isError = false
					if (item1.isTime) {

						item1.rangetime = []
					}
					if (item1.isRange) {
						item1.minVal = ''
						item1.maxVal = ''
					}
				}
			},
			// 确定
			deterClick() {
				let c_obj = this.cfilterlist
				let resArr = []
				let saveFlag = true
				for (let item1 of c_obj) {
					let NewEle = {
						select_value: '',
						select_txt: '',
						key: item1.key,
					}
					if (item1.isTime) {
						NewEle.select_value = NewEle.select_txt = item1.rangetime
						saveFlag = this.intercept_time(item1)
						item1.isError = !saveFlag
						if (!saveFlag) return
					} else if (item1.isRange) {
						if (item1.minVal > item1.maxVal) {
							this.$toast({
								title: `${item1.title}的最低值不能大于最高值`
							})
							saveFlag = false
							item1.isError = true
							return false
						}
						item1.isError = false
						NewEle.select_value = [item1.minVal, item1.maxVal]
					} else {
						let childselect = item1.children.filter(v => v.isChecked) || []
						NewEle.select_value = childselect[0] ? childselect[0].id : '';
						NewEle.select_txt = childselect[0] ? childselect[0].name : '';
					}
					resArr.push(NewEle)
				}
				if (!saveFlag) return
				this.is_selectArr = JSON.parse(JSON.stringify(c_obj))
				this.headerClose()
				this.$emit('retres', {
					resArr
				})
			},
			intercept_time(item1) {

				let {
					rangetime,
					title,
				} = item1
				let len = rangetime.length

				if (len && len != 2) {
					this.$toast({
						title: `请完善${title}的开始和结束时间`
					})
					return false
				} else if (len && len == 2) {
					if (!rangetime[0] || !rangetime[1]) {
						this.$toast({
							title: `请完善${title}的开始和结束时间`
						})
						return false
					}
					let t_start = new Date(rangetime[0]).getTime()
					let t_end = new Date(rangetime[1]).getTime()
					if (t_end < t_start) {
						this.$toast({
							title: `${title}的开始时间不能大于结束时间`
						})
						return false
					}
				}
				return true
			},

			// 打开时间 显示
			onShowDatePicker(item, index1, flag) {
				this.currentPos = flag
				this.currentIndex = index1;
				this.showPicker = true;
				this.sreendefTime = item.rangetime[flag]
			},
			// 选择时间确认
			savetime(res) {

				this.showPicker = false
				if (this.cfilterlist[this.currentIndex]) {
					this.cfilterlist[this.currentIndex].rangetime[this.currentPos] = res.name
					this.currentIndex = -1
					this.currentPos = -1
					this.sreendefTime = ''
				}
			},
			ClearSelTime(item1) {
				item1.rangetime = []
				item1.isError = false
			},
		},

	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";

	.sreen_area {
		width: 100%;
		height: 100%;
		// border:solid 2px red;
		padding: 42rpx 34rpx;

		.sreen_item {
			width: 100%;
			margin-bottom: 47rpx;

			.sreen_tit {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				text-align: left;
				margin-bottom: 14rpx;
			}
		}
	}

	.Time_Area {
		width: 100%;

		&.isError {
			.Time_Select {
				border: solid 1px red;
			}
		}

		.Time_Select {

			width: 200rpx;
			height: 62rpx;
			border-radius: 6rpx;
			background: #F3F4F5;

			border: solid 1px #F3F4F5;
			transition: all .3s;
			font-size: 24rpx;
			font-weight: 400;
			color: #999;
			text-align: center;

			input {
				font-size: 24rpx;
				font-weight: 400;
				color: #999;
				text-align: center;
			}
		}

		.between {
			width: 58rpx;
			height: 2rpx;
			background: #D5D5D5;
		}
	}


	.filter_list {
		width: 500rpx;

		.filter_item.isActive { 
			border: 1px solid #003232;

			.txt {
				color: #003232;
			}
		}

		.filter_item {
			width: 156rpx;
			height: 62rpx;
			border-radius: 6rpx;
			background: #F3F4F5;
			padding: 0 10rpx;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
			border: solid 1px #F3F4F5;
			white-space: nowrap;

			.txt {
				font-size: 24rpx;
				font-weight: 400;
				color: #666;
				text-align: center;
				vertical-align: top;
				max-width: 150rpx;
			}
		}
	}

	.sreen_bottom {
		width: 100%;
		background: #fff;
		padding: 40rpx;
		position: sticky;
		bottom: 0;
		z-index: 10;

		.operate_btn {

			width: 242rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(204, 204, 204, 1);

			font-size: 32rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
			text-align: center;
			margin-right: 14rpx;

			&:last-of-type {
				margin-right: 0;
			}

		}
	}
</style>